﻿
<div class="demo-section">
    <div class="k-content" style="width: 100%">
        <div id="grid"
             data-role="grid"
             data-sortable="true"
             data-pageable="true"
             data-filterable="true"
             data-editable="inline"
             data-selectable="true"
             data-toolbar='[ { template: kendo.template($("#toolbar").html()) } ]'
             data-columns='[
                { field: "CustomerID", title: "ID", width: "75px" },
                { field: "CompanyName", title: "Company"},
                { field: "ContactName", title: "Contact" },
                { field: "ContactTitle", title: "Title" },
                { field: "Address" },
                { field: "City" },
                { field: "PostalCode" },
                { field: "Country" },
                { field: "Phone" },
                { field: "Fax" } ]'
             data-bind="source: dataSource, events: { change: onChange, dataBound: onDataBound }">
        </div>
        <style scoped>
            #grid .k-toolbar { padding: 15px; }

            .toolbar { float: right; }
        </style>
    </div>
</div>

<script type="text/x-kendo-template" id="toolbar">
    <div>
        <div class="toolbar">
            <span data-role="button" data-bind="click: edit"><span class="k-icon k-i-tick"></span>Edit</span>
            <span data-role="button" data-bind="click: destroy"><span class="k-icon k-i-tick"></span>Delete</span>
            <span data-role="button" data-bind="click: details"><span class="k-icon k-i-tick"></span>Edit Details</span>
        </div>
        <div class="toolbar" style="display:none">
            <span data-role="button" data-bind="click: save"><span class="k-icon k-i-tick"></span>Save</span>
            <span data-role="button" data-bind="click: cancel"><span class="k-icon k-i-tick"></span>Cancel</span>
        </div>
    </div>
</script>